<template>
	<view class="detail-tarbar">
		<view class="detail-tarbar-left">
			<view class="cart" @click="inCart">
				<uni-icons type="locked-filled" size="25"color="#646566" v-if="!isActiveCart"></uni-icons>
				<uni-icons type="locked-filled" size="25" color="#0C34BA" v-else></uni-icons>
				<view class="">购物袋</view>
				<view class="cart-count" v-show="isActiveCart">{{allCartCount}}</view>
			</view>
			<view class="love" v-if="!isLike">
				<uni-icons type="heart-filled" size="25"color="#646566" @click="changeLike"></uni-icons>
				<view class="">未收藏</view>
			</view>
			<view class="love" v-else>
				<uni-icons type="heart-filled" size="25"color="#0C34BA" @click="changeLike"></uni-icons>
				<view class="">已收藏</view>
			</view>
		</view>
		<view class="detail-tarbar-right">
			<view class="add" @click="addCart">
				加入购物袋
			</view>
			<view class="buy" @click="emitPayNow">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
			}
		},
		methods:{
			addCart(){
				this.$emit("addCart")
			},
			inCart(){
				uni.switchTab({
					url:"../shopping/Shopping"
				})
			},
			changeLike(){
				this.$emit("chooseLike")
			},
			emitPayNow(){
				this.$emit("payNow")
			}
		},
		computed:{
			isActiveCart(){
				return this.allCartCount !== null
			}
		},
		props:{
			allCartCount:Number,
			isLike:Boolean
		}
	}
</script>

<style scoped>
	.detail-tarbar{
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		width: 94%;
		left: 20rpx;
		right: 20rpx;
		display: flex;
		height: 100rpx;
	}
	.detail-tarbar-left{
		width: 26%;
		display: flex;
		font-size: 14rpx;
		text-align: center;
		justify-content: center;
		margin-top: 20rpx;
	}
	.detail-tarbar-right{
		width: 74%;
		height: 90%;
		display: flex;
		margin-right: 10rpx;
		font-size:25rpx;
		color: #FFFFFF;
		margin-top: 5rpx;
		/* align-items: center; */
	}
	.cart{
		margin-left: 10rpx;
		position: relative;
	}
	.cart-count{
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		position: absolute;
		background-color: #0C34BA;
		color: #FFFFFF;
		top: -10rpx;
		right: 0rpx;
		line-height: 30rpx;
	}
	.love{
		margin-left: 10rpx;
	}
	.add{
		background-color:#6a91ec ;
		width: 50%;
		line-height: 90rpx;
		text-align: center;
		border-radius:90rpx 0rpx 0rpx 90rpx;
	}
	.buy{
		background-color: #0c34ba;
		width: 50%;
		line-height: 90rpx;
		text-align: center;
		border-radius: 0rpx 90rpx 90rpx 0rpx
	}
</style>
